<template>
  <div>
    <el-card class="rounded-md" shadow="never" v-loading="loading">
      <div class="area-list">
        <div class="area-item" v-for="(provinceItem, provinceIndex) in areaTree" :key="provinceIndex">
          <el-popover placement="top-start" :width="500" :title="provinceItem.name" trigger="hover">
            <template #reference>
              <el-checkbox-group v-model="selectedProvinceList" @change="selectProvince(provinceItem.code)">
                <el-checkbox :label="provinceItem.name" :value="provinceItem.code" size="large" />
              </el-checkbox-group>
            </template>
            <div class="area-list" style="width:500px">
              <div class="area-item" v-for="(cityItem, cityIndex) in provinceItem.children" :key="cityIndex">
                <el-checkbox-group v-model="selectedCityList"
                  @change="selectCity(provinceItem.code, cityItem.code, cityItem.name)">
                  <el-checkbox :label="cityItem.name" :value="cityItem.code" size="large" />
                </el-checkbox-group>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="SelectArea">
import { getAreaTree } from '@/api/area';
import { onMounted, ref } from 'vue';
import { watchDeep } from '@vueuse/core';


interface ISelectAreaProps {
  provinceList: Array<string>;
  cityList: Array<string>;
    selectedData: any;
}
const props = withDefaults(defineProps<ISelectAreaProps>(), {
  provinceList: [] as any,
  cityList: [] as any,
  selectedData: [] as any,
  // text: "",
  textMap: {} as any,
});

const areaTree = ref<any>([]) //区域树
const selectedProvinceList = ref<any>(props.provinceList) //选中的省 code
const selectedCityList = ref<any>(props.cityList) //选中的市  code
const selectedData = ref<any>(props.selectedData) //选中的市  code
const loading = ref<any>(true) //选中的文本效果
// console.log(`selectedProvinceList`, selectedProvinceList.value)
// console.log(`selectedCityList`, selectedCityList.value)

// const selectedData = ref<any>({
//   // "100000": {
//   //   name: "",
//   //   code: "",
//   //   cityList: [
//   //     {
//   //       name: "",
//   //       code: "",
//   //     }
//   //   ]
//   // }
// }) //选中的省 市


watchDeep(
  () => selectedData,
  () => {
    selectedProvinceList.value = [];
    selectedCityList.value = [];
    for (const key in selectedData.value) {
      if (Object.prototype.hasOwnProperty.call(selectedData.value, key)) {
        selectedProvinceList.value.push(key)
        const cur = selectedData.value[key]
        cur.cityList.forEach((r1: any) => {
          selectedCityList.value.push(r1.code)
        })

        selectedData.value[key].isAll = cur.cityList.length === areaTree.value.find((r: any) => r.code === key).children.length;
      }
    }

    console.log(`selectedData`, JSON.stringify(selectedData.value))
  }
);

onMounted(() => {
  getAreaTree().then((r: any) => {
    areaTree.value = r.data
  }).finally(() => {
    loading.value = false
  })
})
//选中一个省
const selectProvince = (code: string) => {
  let province = areaTree.value.find((r: any) => r.code == code)
  //是否选中了这个省
  if (!selectedData.value.hasOwnProperty(code)) {
    selectedData.value[province.code] = {
      name: province.name,
      code: province.code,
      cityList: [],
    }

    province?.children.map((r: any) => {
      selectedData.value[code].cityList.push({
        name: r.name,
        code: r.code,
      })
    })
  } else {
    delete selectedData.value[code]
  }
}
//选中一个市
const selectCity = (province_code: string, city_code: string, city_name: string) => {

  let province = areaTree.value.find((r: any) => r.code == province_code)

  const curCity = province?.children.map((v: any) => v.code)
  const flag = curCity.every((r: any) => !selectedCityList.value.includes(r));

  if (!selectedData.value.hasOwnProperty(province_code)) {
    selectedData.value[province.code] = {
      name: province.name,
      code: province.code,
      cityList: [],
    }
  }
  const idx = selectedData.value[province_code].cityList.findIndex((r: any) => r.code === city_code);
  console.log(`idx`, idx)
  if (idx > -1) {
    selectedData.value[province_code].cityList.splice(idx, 1)
  } else {
    selectedData.value[province_code].cityList.push({
      name: city_name,
      code: city_code,
    })
  }
  //一个省的所有市都没选中就去掉省的选中
  if (flag) {
    delete selectedData.value[province_code]
  }
}


const getSelectedProvinceList = () => {
  return selectedProvinceList.value;
};
const getSelectedCityList = () => {
  return selectedCityList.value;
};
const getSelectedData = () => {
  return selectedData.value;
};

defineExpose({
  getSelectedProvinceList,
  getSelectedCityList,
  getSelectedData,
});

</script>

<style lang="scss" scoped>
.area-list {
  display: flex;
  flex-wrap: wrap;
}

.area-item {
  margin: 10px;
}
</style>
